@use "@core/scss/base/placeholders" as *;
@use "@core/scss/template/placeholders" as *;
@use "@configured-variables" as variables;
@use "@layouts/styles/mixins" as layoutsMixins;
@use "@core/scss/base/mixins";
@use "vuetify/lib/styles/tools/states" as vuetifyStates;

.layout-horizontal-nav {
  @extend %nav;

  // 图标样式
  .nav-item-icon {
    @extend %horizontal-nav-item-icon;
  }

  // 导航组和导航链接通用样式
  .nav-link,
  .nav-group {
    // 禁用状态导航项
    &.disabled {
      opacity: var(--v-disabled-opacity);
      pointer-events: none;
    }

    // 设置导航组和导航链接的宽度
    &.sub-item {
      @extend %horizontal-nav-subitem;
    }
  }

  // 导航链接
  .nav-link {
    @extend %nav-link;

    a {
      @extend %horizontal-nav-item;

      // 鼠标悬停状态时添加 : before 伪元素
      @include mixins.before-pseudo;

      // 添加 Vuetify 状态
      @include vuetifyStates.states($active: false);
    }

    // 顶层导航链接
    &:not(.sub-item) {
      a {
        @extend %horizontal-nav-top-level-item;

        &.router-link-active {
          @extend %nav-link-active;
        }
      }
    }

    // 子链接
    &.sub-item {
      a {
        &.router-link-active {
          // 活动状态链接使用主色
          @extend %horizontal-nav-sub-nav-link-active;
        }
      }
    }
  }

  // 导航组
  .nav-group {
    .popper-triggerer {
      .nav-group-label {
        @extend %horizontal-nav-item;
      }
    }

    > .popper-triggerer > .nav-group-label {
      // 鼠标悬停状态时添加 : before 伪元素
      @include mixins.before-pseudo;

      // 添加 Vuetify 状态
      @include vuetifyStates.states($active: false);
    }

    .popper-content {
      @extend %horizontal-nav-popper-content-hidden;
      @extend %horizontal-nav-popper-content;

      background-color: rgb(var(--v-theme-surface));

      // 设置弹出内容的最大高度
      > div {
        max-block-size: variables.$horizontal-nav-popper-content-max-height;
      }
    }

    // 顶层导航组
    &:not(.sub-item) {
      > .popper-triggerer {
        position: relative;

        // 弹窗触发时鼠标指针事件（pointer-events）为 none
        &::after {
          position: absolute;
          block-size: variables.$horizontal-nav-popper-content-top;
          content: "";
          inline-size: 100%;
          inset-block-start: 100%;
          inset-inline-start: 0;
          pointer-events: none;
        }
      }

      // 当内容显示时通过使用伪元素将鼠标指针事件设置为 auto（桥接作用）
      &.show-content > .popper-triggerer::after {
        // 当弹出触发器（导航组）下方有导航项时添加 z-index: 2，以避免组导航组下方的导航项会获取焦点，从而关闭弹出内容
        z-index: 2;
        pointer-events: auto;
      }

      > .popper-triggerer > .nav-group-label {
        @extend %horizontal-nav-top-level-item;
      }

      &.active {
        > .popper-triggerer > .nav-group-label {
          @extend %nav-link-active;
        }
      }

      > .popper-content {
        // 在弹出内容和其包装层之间添加间距
        margin-block-start: variables.$horizontal-nav-popper-content-top !important;
      }
    }

    // 导航子项（非顶层项）
    &.sub-item {
      &.active {
        @include mixins.selected-states("> .popper-triggerer > .nav-group-label::before");
      }

      // 缩小三级嵌套的导航链接（顶层组 > 子组 > 导航链接）中图标的大小
      .sub-item {
        .nav-item-icon {
          @extend %third-level-nav-item-icon;
        }
      }
    }

    .nav-group-arrow {
      font-size: 1.375rem;
      margin-inline-start: auto;
    }

    &.popper-inline-end {
      .nav-group-arrow {
        transform: rotateZ(270deg);

        @include layoutsMixins.rtl {
          transform: rotateZ(90deg);
        }
      }
    }

    .nav-item-title {
      @extend %horizontal-nav-item-title;
    }

    &.show-content {
      > .popper-content {
        @extend %horizontal-nav-popper-content-visible;
      }

      &:not(.active) {
        @include mixins.selected-states("> .popper-triggerer > .nav-group-label::before");
      }
    }
  }
}
